<template>
  <div class="Tabbar">
    <tabbar>
      <tabbar-item :selected="$route.name === 'Seat'" link="/">
        <img slot="icon"
             :src="$route.name === 'Seat'?'static/icon/home_icon_index_selected@3x.png':'static/icon/home_icon_index_default@3x.png'">
        <span slot="label">预约</span>
      </tabbar-item>
      <tabbar-item :selected="$route.name == 'Order'" link="/Order">
        <img slot="icon"
             :src="$route.name === 'Order'?'static/icon/home_icon_order_selected@3x.png':'static/icon/home_icon_order_default@3x.png'">
        <span slot="label">订单</span>
      </tabbar-item>
      <tabbar-item :selected="$route.name === 'Mine'" link="/Mine">
        <img slot="icon"
             :src="$route.name === 'Mine'?'static/icon/home_icon_my_selected@3x.png':'static/icon/home_icon_my_default@3x.png'">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import {Tabbar, TabbarItem} from 'vux'
import {mapState} from 'vuex'

export default {
  data () {
    return {}
  },
  created () {
    //      console.log(this.$route)

  },
  methods: {},
  computed: {
    ...mapState({
      isOrdering: state => state.isOrdering
    })
  },
  //    watch: {
  //      $route(to, from){
  //        this.$store.dispatch('showFooter')
  //      }
  //    },
  components: {
    Tabbar,
    TabbarItem
  }
}
</script>

<style lang="less" type="text/less">
.Tabbar {
  .weui-tabbar {
    background: #fff !important;

    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
      color: @common-color;
    }
  }

  .weui-tabbar:before {
    border: none;
  }
}

</style>
